<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:16:22
 * @LastEditors: sunliq sunliq@chanjet.com
 * @LastEditTime: 2023-06-26 23:07:56
 * @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
-->
<template>
    <div class="equipment-statistics flex flex-wrap justify-center">
        <div class="item flex flex-direction justify-center align-center">
            <span class="number">689</span>
            <span class="label">设备总数</span>
            <img class="img" src="../../assets/img/u19.svg" />
        </div>
        <div class="item flex flex-direction justify-center align-center" @click="toastDetail('EquipmentAlarm')">
            <span class="number">32</span>
            <span class="label">设备告警</span>
            <img class="img" src="../../assets/img/u20.svg" />
        </div>
        <div class="item flex flex-direction justify-center align-center">
            <span class="number">131</span>
            <span class="label">在线设备</span>
            <img class="img" src="../../assets/img/u21.svg" />
        </div>
        <div class="item flex flex-direction justify-center align-center" @click="toastDetail('EquipmentNumber')">
            <span class="number">32</span>
            <span class="label">异常值</span>
            <img class="img" src="../../assets/img/u21.svg" />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        };
    },
    props: {
        
    },
    created() {},

    mounted() {},

    methods: {
        toastDetail(type) {
            this.$emit('toast-detail', type)
        }   
    },
};
</script>
<style lang='scss' scoped>
    .equipment-statistics {
        .item {
            width: 40%;
            margin-top: 15px;
            cursor: pointer;
        }
        .number {
            color: #00e0db;
            font-size: 28px;
        }
        .label {
            margin-top: 5px;
            color: #027DB4;
            font-size: 16px;
        }
        .img{
            margin-top: 5px;
            width: 91px;
            height: 52px;
        }
    }
</style>